<template>
  <div class="vux-toast">
    <div class="weui-mask_transparent" v-show="isShowMask && show"></div>
    <transition :name="transition">
      <div class="weui-toast" :style="{width: width}" :class="toastClass" v-show="show">
        <i class="weui-icon-success-no-circil weui-icon_toast" v-show="type !== 'text'"></i>
        <p class="weui-toast__content" v-if="text" :style="style" v-html="text"></p>
        <p class="weui-toast__content" v-else><slot></slot></p>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    value: Boolean,
    time: {
      type: Number,
      default: 2000,
    },
    type: {
      type: String,
      default: 'success',
    },
    transition: {
      type: String,
      default: 'vux-fade',
    },
    width: {
      type: String,
      default: '7.6em',
    },
    isShowMask: {
      type: Boolean,
      default: false,
    },
    text: String,
  },
  data () {
    return {}
  },
  computed: {},
  ready () {},
  attached () {},
  methods: {},
  components: {}
}
</script>

<style lang="css">
</style>
